<template>
    <el-table :data="article" border style="width: 100%" :cell-style="{ height: '65px' }" v-loading="loading">
        <el-table-column label="封面" width="250" v-skeleton="{ loading: loading, rows: 10 }">
            <template #default="scope">
                <img :src="scope.row.face" style="width: 100%;max-height: 200px;" />
            </template>
        </el-table-column>
        <el-table-column prop="title" label="标题" width="180" />
        <el-table-column prop="time" label="上传时间" width="180" />
        <el-table-column prop="tag" label="标签" width="180" />
        <el-table-column label="操作" width="528.8">
            <template #default="scope">
                <el-button type="primary" @click="updata(scope.row)">修改文章</el-button>
                <el-button type="error" @click="start(scope.row), dialogVisible = true">删除文章</el-button>
            </template>
        </el-table-column>
    </el-table>
    <pageComponents @pageChange="handlePageChange" @siezsChange="handleSizesChange" :max=length />

    <el-dialog v-model="dialogVisible" title="删除文字" width="30%" :before-close="handleClose" :close-on-click-modal="false"
        :close-on-press-escape="false">
        <div>
            确定要删除这篇文章吗，删除后不可恢复
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false, detele()">
                    确定
                </el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
import { ref } from 'vue';
import $ from 'jquery';
import { useStore } from 'vuex';
import pageComponents from '@/components/global/pageComponents.vue';
import { useRouter } from 'vue-router';
export default {
    name: "adminMyArticle",
    components: {
        pageComponents,
    },
    setup() {
        const store = useStore();
        const router = useRouter();
        let dialogVisible = ref(false);
        let article = ref();

        let nowPage = ref(1);
        let nowSizes = ref(10);
        let length = ref('');

        let loading = ref(true);

        let getInfo = () => {
            $.ajax({
                type: "post",
                url: "http://124.221.73.180:3001/articleGet/getArticleByAuthor/",
                headers: {
                    "satoken": store.state.admin.token,
                },
                data: {
                    name: store.state.admin.adminName,
                    page: nowPage.value,
                    sizes: nowSizes.value,
                },
                success(resp) {
                    loading.value = false;
                    article.value = resp.article;
                    length.value = resp.length;
                }
            });
        }
        getInfo();
        let handlePageChange = (t) => {
            nowPage.value = t;
            getInfo();
        }
        let handleSizesChange = (sizes) => {
            nowSizes.value = sizes;
            getInfo();
        }
        let prop = ref('');
        let start = (t) => {
            prop.value = t;
        }
        let updata = (t) => {
            prop.value = t;
            router.push({
                name: "articleUpload",
                query: {
                    id: prop.value.id,
                    from: "checked",
                },
            })
        }
        let detele = () => {
            $.ajax({
                type: "post",
                url: "http://124.221.73.180:3001/article/detele/",
                headers: {
                    "satoken": store.state.admin.token,
                },
                data: {
                    id: prop.value.id,
                },
                success() {
                    getInfo();
                }
            });
        }
        return {
            handlePageChange,
            handleSizesChange,
            start,
            detele,
            updata,

            loading,

            router,
            dialogVisible,
            nowPage,
            nowSizes,
            length,
            article,
        }
    }
}

</script>

<style scoped></style>